<template>
  <div class="bulletin">
    <el-form label-width="130px" @submit.native.prevent="Create()">
      <el-form-item label="标题">
        <el-input v-model="title" placeholder="标题" />
      </el-form-item>
      <el-form-item label="作品封面">
        <Single-image v-model="cover"/>
      </el-form-item>
      <el-form-item label="播放文件">
        <div style="max-width: 600px;">
          <Single-video v-if="!url" v-model="url"/>
          <video v-if="url" :src="url" style="width: 100%; height: auto;" controls/>
          <el-button type="primary" @click="clearVideo">清空视频</el-button>
        </div>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="type">
          <el-option :value="1" label="点播视频" />
          <el-option :value="2" label="点播音频" />
          <el-option :value="3" label="艺课视频" />
          <el-option :value="4" label="艺课音频" />
        </el-select>
      </el-form-item>
      <el-form-item label="简介">
        <el-input :rows="6" v-model="desc" type="textarea" />
      </el-form-item>
      <el-form-item label="内容">
        <tinymce :height="300" v-model="content" />
      </el-form-item>
      <el-form-item label="点播时长">
        <el-input v-model="duration" placeholder="点播时长" />
      </el-form-item>
      <!-- <el-form-item label="发布时间">
        <el-date-picker v-model="created_at" type="datetime" placeholder="选择发布时间" value-format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" native-type="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import SingleImage from '@/components/Upload/SingleImage'
import SingleVideo from '@/components/Upload/SingleVideo'
import Tinymce from '@/components/Tinymce'
import { parseTime } from '@/utils/index'
export default {
  components: {
    Tinymce,
    SingleImage,
    SingleVideo
  },
  data() {
    return {
      audioUrl: '',
      title: '',
      cover: '',
      url: '',
      type: '',
      desc: '',
      content: '',
      duration: '',
      created_at: parseTime(new Date().getTime())
    }
  },
  methods: {
    clearVideo() {
      this.url = '' // 清空已上传的音频 URL
    },
    Create() {
      const params = {
        title: this.title,
        cover: this.cover,
        url: this.url,
        type: this.type,
        desc: this.desc,
        content: this.content,
        duration: this.duration,
        created_at: this.created_at
      }
      console.log(params)
      this.$http
        .post('videos', params)
        .then(response => {
          this.$success('操作成功')
          this.$router.push('/videos')
        })
        .catch(response => {
          this.$error(response)
        })
    }
  }
}
</script>

<style>
.bulletin .el-progress-circle {
  background: #fff;
}
.avatar-uploader {
  position: relative;
}
.avatar-uploader .percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  max-width: 500px;
  display: block;
}
</style>
